<template>
	<view v-if="pageShow">
		<view class="mainpadding" style="background-color:#2361FF;">
			<view class="flexcenter margin_top">
				<view class="zline margin_right6"></view>
				<view class="ershiba xiaobai margin_right6">邀请好友得积分</view>
				<view class="yline"></view>
			</view>
			<view class="radius baibox margin_top4 dingwei">
				<uqrcode ref="uqrcode" canvas-id="qrcode"  @click="ewmfn" v-bind:value="qrcodeurl" :options="{ margin: 10,foregroundImageSrc:userInfo.avatar_text}"
					size="200">
				</uqrcode>
				<!-- <image class="erwwim" src="../static/image/system/zybjt.png" mode=""></image> -->
				<view class="sanshier xiaohei fonweight textcenter margin_top2 dingwei" style="z-index: 1;">邀请码：
					<text class="sanshier xiaolan fonweight ">{{userInfo.invite_code}}</text>
				</view>
				<image class="fenx" src="../static/image/system/fx1.png" mode=""></image>
			</view>
		</view>
		<view class="flexcenter margin_top5 mainpadding">
			<view class="qlbtn flexcenter margin_right3" @click="jumper('/pages_mypage/wodetuandui')">我的团队</view>
			<view class="xlbtn flexcenter" @click="httpRequest.shareFn()">分享给好友</view>
			<!-- <view class="xlbtn flexcenter" @click="open">分享给好友</view> -->
			<!-- <view class="bigbtn" @click="jumper('/pages_mypage/wodetuandui')">我的团队</view> -->
		</view>
		<view class="xiaolan margin_top5 textcenter strongtext" @click="saveimg">点击保存二维码</view>
		<!-- <liu-poster ref="liuPoster" :width="750" :height="1300" @change="change"></liu-poster> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				httpRequest,
				qrcodeurl: "",
				userInfo: {},
				pageShow:false,
				canvasList: [{
					type: 'color', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 750, //宽度(rpx)
					height: 1300, //高度(rpx)
					x: 0, //x轴位置(离左边的距离rpx)
					y: 0, //y轴位置(离上边的距离rpx)
					radius: 10, //圆角(rpx)
					lineWidth: 40, //边框宽度(rpx)
					lineColor: '#000000', //边框颜色
					colorObj: {
						colorList: ['#6900FF', '#FFFFFF'], //传入1个值为纯色，2个值为渐变色
						direction: 2 //渐变色绘制方向(1:从左到右;2:从上到下;3:左上角到右下角;4:右上角到左下角)
					}, //type为color时必填
				}, {
					type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 132, //宽度(rpx)
					height: 132, //高度(rpx)
					x: 40, //x轴位置(离左边的距离rpx)
					y: 120, //y轴位置(离上边的距离rpx)
					radius: 66, //圆角(rpx)
					lineWidth: 6, //边框宽度(rpx)
					lineColor: '#FFFFFF', //边框颜色
					path: 'https://kangtewen.yuntaiqikeji.com/uploads/20240403/a57d14948345aa2bb806083b0fa7cd70.jpg', //图片地址(type为image时必填)
				}, {
					type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 400, //文本宽度(rpx)
					height: 40, //文本高度(rpx)
					x: 200, //x轴位置(离左边的距离rpx)
					y: 145, //y轴位置(离上边的距离rpx)
					color: '#FFFFFF', //文本颜色
					fontSize: 36, //文字大小(rpx)
					lineHeight: 36, //文字行高(rpx)
					bold: true, //文字是否加粗
					content: '好物分享猫猫虫', //文本内容(type为text时必填)
				}, {
					type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 400, //文本宽度(rpx)
					height: 40, //文本高度(rpx)
					x: 200, //x轴位置(离左边的距离rpx)
					y: 195, //y轴位置(离上边的距离rpx)
					color: '#FFFFFF', //文本颜色
					fontSize: 28, //文字大小(rpx)
					lineHeight: 28, //文字行高(rpx)
					bold: false, //文字是否加粗
					content: '猫猫虫给你分享了一张美图', //文本内容(type为text时必填)
				}, {
					type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 670, //宽度(rpx)
					height: 670, //高度(rpx)
					x: 40, //x轴位置(离左边的距离rpx)
					y: 300, //y轴位置(离上边的距离rpx)
					radius: 20, //圆角(rpx)
					lineWidth: 12, //边框宽度(rpx)
					lineColor: '#FFFFFF', //边框颜色
					path: 'https://kangtewen.yuntaiqikeji.com/uploads/20240403/a57d14948345aa2bb806083b0fa7cd70.jpg', //图片地址(type为image时必填)
					childs: [{
						type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
						width: 400, //文本宽度(rpx)
						height: 40, //文本高度(rpx)
						x: 100, //x轴位置(离左边的距离rpx)
						y: 400, //y轴位置(离上边的距离rpx)
						color: '#FFFFFF', //文本颜色
						fontSize: 36, //文字大小(rpx)
						lineHeight: 36, //文字行高(rpx)
						bold: true, //文字是否加粗
						content: '好物分享猫猫虫', //文本内容(type为text时必填)
					}]
				}, {
					type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 4, //线条宽度(rpx)
					color: '#FFFFFF', //线条颜色
					startX: 20, //起点x轴位置(离左边的距离rpx)
					startY: 270, //起点y轴位置(离上边的距离rpx)
					endX: 730, //终点x轴位置(离左边的距离rpx)
					endY: 270, //终点y轴位置(离上边的距离rpx)
					lineType: 'dash', //线条类型(solid:实线;dash:虚线)
				}, {
					type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 4, //线条宽度(rpx)
					color: '#FFFFFF', //线条颜色
					startX: 20, //起点x轴位置(离左边的距离rpx)
					startY: 1000, //起点y轴位置(离上边的距离rpx)
					endX: 730, //终点x轴位置(离左边的距离rpx)
					endY: 1000, //终点y轴位置(离上边的距离rpx)
					lineType: 'dash', //线条类型(solid:实线;dash:虚线)
				}, {
					type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 500, //文本宽度(rpx)
					height: 150, //文本高度(rpx)
					x: 40, //x轴位置(离左边的距离rpx)
					y: 1050, //y轴位置(离上边的距离rpx)
					color: '#9043FD', //文本颜色
					fontSize: 32, //文字大小(rpx)
					lineHeight: 45, //文字行高(rpx)
					bold: true, //文字是否加粗
					content: '这个是一段测试文字，这个是一段测试文字，这个是一段测试文字，这个是一段测试文字，这个是一段测试文字。', //文本内容(type为text时必填)
				}, {
					type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
					width: 150, //宽度(rpx)
					height: 150, //高度(rpx)
					x: 550, //x轴位置(离左边的距离rpx)
					y: 1050, //y轴位置(离上边的距离rpx)
					radius: 4, //圆角(rpx)
					lineWidth: 6, //边框宽度(rpx)
					lineColor: '#FFFFFF', //边框颜色
					path: 'https://kangtewen.yuntaiqikeji.com/uploads/20240403/a57d14948345aa2bb806083b0fa7cd70.jpg', //图片地址(type为image时必填)
				}],
				urlasdfa: ''
			}
		},
		onLoad() {
			this.userinfomsg()
			
		},
		methods: {
			//开始绘制
			open() {
				this.$nextTick(() => {
					this.$refs.liuPoster.init(this.canvasList)
				})
			},
			//绘制成功返回生成的海报图片地址
			change(e) {
				this.urlasdfa = e
				console.log("惊雷》》》》》》》》",e,);
				this.previewImg(this.urlasdfa)
			},
			//预览生成的海报图片
			previewImg(url) {
				if (!url) return
				uni.previewImage({
					urls: [url]
				})
			},
			// 二维码点击预览图片
			ewmfn() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						console.log(res);
						var i = [res.tempFilePath]; //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
					}
				});
			},
			shareFun(){
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 2,
							imageUrl: res.tempFilePath,
							success: function (res) {
								console.log("success:" + JSON.stringify(res));
							},
							fail: function (err) {
								console.log("fail:" + JSON.stringify(err));
							}
						});
					}
				});
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
					this.getsystem()
				})
			},
			getsystem() {
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {
					type:"share_url"
				}).then(res => {
					this.qrcodeurl = res.data + "?code="+this.userInfo.invite_code
					console.log(res.data,"999999");
					this.pageShow = true
				})
			},
		saveimg(){
			this.$refs.uqrcode.save({
			  success: () => {
			   httpRequest.toast("保存成功")
			  }
			});
		},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.xlbtn {
		width: 382rpx;
		height: 88rpx;
		background: #2361FF;
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.qlbtn {
		width: 280rpx;
		height: 88rpx;
		background: rgba(35, 97, 255, 0.1);
		border-radius: 66rpx 66rpx 66rpx 66rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #2361FF;
	}

	.fenx {
		width: 721.58rpx;
		max-width: 106%;
		height: 341.6rpx;
		position: absolute;
		bottom: -10rpx;
		left: -15rpx;
	}

	.erwwim {
		width: 400rpx;
		height: 400rpx;

	}

	.baibox {
		background-color: #fff;
		padding: 136rpx 136rpx 284rpx;
		z-index: 0;
	}

	.yline {
		width: 50rpx;
		height: 4rpx;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
	}

	.zline {
		width: 50rpx;
		height: 4rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
	}
</style>